<div class="comp-reset-google">
    <modal :show="true" :width="670">
        <div class="modal-header">
            <a href="javascript:;" class="close" @click="hide()"><span>&times;</span></a>
            <span class="modal-title" >{{$t('basic.securitySetting.resetGTitle')}}</span>
        </div>
        <validator :rules="rules" :parent="_self">
            <form class="m-form-dialog" name="form" action="javascript:;">
                <div class="modal-body reset-google-body">
                    <div class="left">
                        <div class="qrcode">
                            <div class="key">
                                <qrcode :val="googleAuthenticator" :size="160"></qrcode>
                            </div>
                            <p class="key key-title">{{$t('basic.securitySetting.key')}}</p>
                            <p class="key key-text">
                                <loading type="inline" v-if="isLoading === true"></loading>
                                <template v-else>{{secretcode}}</template>
                            </p>
                            <p class="key key-tip">{{$t('basic.securitySetting.tip')}}</p>
                        </div>
                    </div>
                    <div class="right">
                        <p class="tip">
                            <i18n path="basic.securitySetting.qrtip" class="tip">
                                <span place="phone" class="purple">{{ $t('basic.securitySetting.phone') }}</span>
                                <span place="code" class="purple">{{ $t('basic.securitySetting.code') }}</span>
                            </i18n>
                        </p>


                        <div class="g-col-row">
                            <div class="g-col-label">
                                <label for="googleCode">{{$t('basic.securitySetting.clientnm')}}</label>
                            </div>
                            <div class="g-col-input">
                                <input type="text" class="fn-block" v-model="clientName" disabled>
                                <div class="ui-tip"></div>
                            </div>
                        </div>

                        <div class="g-col-row">
                            <div class="g-col-label">
                                <label for="identifyingCode">{{$t('basic.securitySetting.vcode')}}</label>
                            </div>
                            <div class="g-col-input">
                                <verify-code :on-success="onSendSuccess"
                                             :on-fail="onSendFail" ></verify-code>
                                <input type="text"
                                       class="fn-block"
                                       id="identifyingCode"
                                       name="identifyingCode"
                                       maxlength="6"
                                       autocomplete="off"
                                       :placeholder="$t('common.pVerification')"
                                       v-model="form.identifyingCode">
                                <div class="ui-tip"></div>
                            </div>
                        </div>
                        <div class="g-col-row">
                            <div class="g-col-label">
                                <label for="googleCode" style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{$t('basic.securitySetting.gcode')}}</label>
                            </div>
                            <div class="g-col-input">
                                <input type="text"
                                       class="fn-block"
                                       autocomplete="off"
                                       maxlength="6"
                                       id="googleCode"
                                       name="googleCode"
                                       :placeholder="$t('basic.securitySetting.gcode')"
                                       v-model="form.googleCode">
                                <div class="ui-tip"></div>
                            </div>
                        </div>

                        <div class="g-col-row">
                            <div class="g-col-text">
                                <div class="btn-group">
                                    <button type="submit"
                                            class="ui-btn fn-block"
                                            v-if="isRequesting === false"
                                            @click="submit()">{{ $t('common.confirm') }}</button>
                                    <button type="submit"
                                            class="ui-btn fn-block"
                                            v-if="isRequesting === true"
                                            disabled="disabled">{{ $t('common.waiting') }}...</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">

                </div>
            </form>
        </validator>
    </modal>
</div>